<template>
  <div class="home">
    <van-nav-bar title="水果商城" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="(list, index) in list"
        v-if="index < 6"
        :key="index"
        @click="swipeItem(list)"
        ><img :src="list.goodsImg" alt="" class="image"
      /></van-swipe-item>
    </van-swipe>
    <div class="home-list">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="home-div"
        @click="clickDetail(item)"
      >
        <div class="goods-img">
          <img :src="item.goodsImg" alt="" />
        </div>
        <div class="goods-name">{{ item.goodsName }}</div>
        <div
          class="goods-name"
          style="font-size: 12px; color: rgb(147, 147, 147)"
        >
          {{ item.slogan }}
          &nbsp;
        </div>
        <div class="goods-name" style="font-size: 12px">
          <span style="color: rgb(255, 136, 0)">自营 </span> &nbsp;
          <span style="background: rgb(255, 136, 0); border-radius: 5px"
            >次日达
          </span>
          &nbsp;
          <span style="color: rgb(175, 82, 239)">深圳平湖仓 </span>
        </div>
        <div class="price-cart">
          <span>{{ item.mallPrice }}</span>
          <van-icon name="cart-o" size="30" color=" rgb(255, 136, 0)" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { checkLikeList } from "../common/Api/index.js";
export default {
  data() {
    return {
      list: {},
    };
  },
  mounted() {
    this.checkLike();
  },
  methods: {
    checkLike() {
      checkLikeList({ key: "", pagnum: 1, limit: 100 }).then((res) => {
        this.list = res.records;
      });
    },
    clickDetail(val) {
      sessionStorage.setItem("active", JSON.stringify("home"));
      sessionStorage.setItem("detail", JSON.stringify(val));
      this.$router.push("detail");
    },
    swipeItem(item) {
      sessionStorage.setItem("active", JSON.stringify("home"));
      sessionStorage.setItem("detail", JSON.stringify(item));
      this.$router.push("detail");
      console.log(item);
    },
  },
};
</script>
<style scoped  lang="scss">
.home {
  width: 96%;
  margin-bottom: 50px;
  margin: auto;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  .image {
    width: 100%;
    height: 200px;
  }
  .home-list {
    margin-top: 10px;
    width: 100%;
    background: url("../assets/imgs/bjt.jpg") no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    flex-wrap: wrap;

    .home-div {
      width: 4.6rem;
      margin-left: 5px;
      margin-bottom: 10px;
      .goods-img {
        background: #fff;
        img {
          height: 4.6rem;
        }
      }
      .goods-name {
        font-size: 14px;
        padding: 2px 13px;
        background: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // color: ;
      }
      .price-cart {
        padding: 0 13px;
        background: #fff;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        span {
          color: rgb(255, 136, 0);
          font-size: 16px;
        }
      }
    }
  }
}
</style>